<style scoped>
    .add {
        margin-left: 10px;
    }

    .search {
        margin-left: 10px;
    }

    .actionBtn {
        margin-left: 5px;
    }

    .delete {
        margin-left: 10px;
    }

    .page_style {
        margin-top: 10px;
        margin-right: 10px;
        text-align: right;
    }
</style>
<template>
    <wl-content-top>
        <template slot="header">
            <Form>
                <FormItem>
                    <FormItem>
                        <span class="name">举报标题：</span>
                        <Select v-model="report_title" style="width:200px;margin-left: 10px" clearable>
                            <Option v-for="(item,index) in titleList" :value="item.report_title" :key="index">{{
                                item.report_title
                                }}
                            </Option>
                        </Select>
                        <Button type="success" class="search" @click="searchTitle">
                            <Icon type="ios-search"/>
                            搜索
                        </Button>
                        <Button type="primary" class="add" @click="addReport">
                            <Icon type="ios-add"/>
                            添加举报
                        </Button>
                        <Button class="delete" type="error" @click="delSelect">批量删除
                        </Button>
                    </FormItem>
                </FormItem>
            </Form>
        </template>
        <template slot="body">
            <div>
                <Table border ref="selection" :loading="loading" :columns="reportList" :data="reportData"
                       @on-selection-change="tableSelectChange">
                    <template slot="action" slot-scope="{ row }">
                        <Button type="primary" size="small" class="actionBtn" @click="editReport(row)">编辑</Button>
                        <Button type="info" size="small" class="actionBtn" @click="details(row)">详情</Button>
                        <Button type="error" size="small" class="actionBtn" @click="remove(row)">删除</Button>
                    </template>
                </Table>
            </div>
            <div class="page_style">
                <Page :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" show-total
                      @on-change="pageChange"/>
            </div>
            <add-edit-report ref="edit" :type="type" :isShow="addEditModal" :reportTitle="titleName"
                             :id="reportId"
                             @cancel="cancelAction"
                             @results="save">
            </add-edit-report>
            <report-details :isShow="detailsModal" :data="detailsData" @cancel="cancelAction"></report-details>
        </template>
    </wl-content-top>
</template>

<script>
import {
  getReportList,
  getReportTitleList,
  editReport,
  deleteReport,
  deleteReportStrips
} from '@/api/manager-report'
import { addOnlineReport } from '@/api/site'
import AddEditReport from './components/add-edit-report/index'
import ReportDetails from './components/report-details/index'

export default {
  components: { ReportDetails, AddEditReport },
  data () {
    return {
      report_title: '',
      reportList: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '举报标题',
          key: 'report_title',
          align: 'center'
        },
        {
          title: '举报人姓名或部门',
          key: 'report_people_name',
          align: 'center'
        },
        {
          title: '电话',
          key: 'phone',
          align: 'center'
        },
        {
          title: ' 被投诉人姓名或部门',
          key: 'be_complain_name',
          align: 'center'
        },
        {
          title: '投诉内容',
          key: 'report_content',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      reportData: [],
      titleList: [],
      loading: false,
      type: '',
      addEditModal: false,
      detailsModal: false,
      titleName: '',
      reportId: '',
      detailsData: {},
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 1
      },
      selectData: []

    }
  },
  methods: {
    init (data) {
      this.loading = true
      getReportList(data).then(ret => {
        if (ret.data.errcode === 1001) {
          this.loading = false
          this.reportData = ret.data.data.list.data
          this.pageObj.totalRecord = ret.data.data.list.total
        } else {
          this.loading = false
          this.error(data)
        }
      })
    },
    reportTitleList () {
      getReportTitleList().then(ret => {
        if (ret.data.errcode === 1001) {
          this.titleList = ret.data.data.list
        } else {
          this.error()
        }
      })
    },
    searchTitle () {
      this.pageObj.page = 1
      this.pageObj.pageSize = 10
      const data = {
        ...this.pageObj,
        report_title: this.report_title
      }
      this.init(data)
    },
    addReport () {
      this.addEditModal = true
      this.titleName = '添加举报'
      this.type = 'add'
    },
    editReport (row) {
      this.addEditModal = true
      this.titleName = '编辑举报'
      this.reportId = row.id
      this.type = 'edit'
    },
    details (row) {
      this.detailsModal = true
      this.detailsData = row
    },
    remove (row) {
      this.$Modal.confirm({
        title: '确定要删除吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          let param = { id: row.id }
          deleteReport(param).then(ret => {
            if (ret.data.errcode === 1001) {
              this.$Modal.remove()
              this.init(this.pageObj)
              this.success()
            } else {
              this.$Modal.remove()
              this.error()
            }
          })
        }
      })
    },
    cancelAction () {
      this.addEditModal = false
      this.detailsModal = false
    },
    save (formItem) {
      this.$refs.edit.btnLoading = true
      if (formItem.id === '') {
        addOnlineReport(formItem).then(ret => {
          if (ret.data.errcode === 1001) {
            this.success()
          } else {
            this.error()
          }
          this.$refs.edit.btnLading = true
          this.init(this.pageObj)
          this.addEditModal = false
        })
      } else {
        editReport(formItem).then(ret => {
          if (ret.data.errcode === 1001) {
            this.success()
          } else {
            this.error()
          }
          this.$refs.edit.btnLadoing = false
          this.init(this.pageObj)
          this.addEditModal = false
        })
      }
    },
    tableSelectChange (selection) {
      this.selectData = selection
    },
    delSelect () {
      let delList = this.selectData
      let ids = []
      if (delList.length <= 0) {
        this.$Message.error('请选择要删除的数据')
        return false
      } else {
        delList.forEach((item) => {
          ids.push(item.id)
        })
        this.$Modal.confirm({
          title: '确认删除选中信息吗？',
          content: '删除后不可恢复，请确认后再操作！',
          loading: true,
          onOk: () => {
            deleteReportStrips({ ids: JSON.stringify(ids) }).then(ret => {
              if (ret.data.errcode === 1001) {
                this.$Modal.remove()
                this.init(this.pageObj)
                this.success()
              } else {
                this.$Modal.remove()
                this.error()
              }
            })
          }
        })
      }
    },
    pageChange (e) {
      this.pageObj.page = e
      const data = {
        ...this.pageObj,
        report_title: this.report_title
      }
      this.init(data)
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init(this.pageObj)
    this.reportTitleList()
  }
}
</script>
